<!-- 
内边距
-->

<template>
  <div class="colStart">
    <div class="rowStart mb-2" style="align-items: center" v-if="_widget.style.backgroundColorType !== undefined">
      <el-radio-group v-model="_widget.style.backgroundColorType!">
        <el-radio value="">不设置</el-radio>
        <el-radio value="color">背景色</el-radio>
        <el-radio value="linear">渐变色</el-radio>
        <el-radio value="image">背景图</el-radio>
      </el-radio-group>
    </div>
    <div
      class="rowStart mt-2"
      v-if="_widget.style.backgroundColorType === undefined || _widget.style.backgroundColorType! === 'color'"
    >
      <div class="rowStart">
        <div class="cLabel">背景颜色:</div>
        <el-color-picker v-model="_widget.style.backgroundColorValue!" show-alpha></el-color-picker>
      </div>
    </div>
    <div class="colStart mt-2" v-if="_widget.style.backgroundColorType! === 'linear'">
      <div class="rowStart">
        <div class="cLabel">渐变方向:</div>
        <el-radio-group v-model="_widget.style.backgroundColorLinear![0]">
          <el-radio value="right">从左到右</el-radio>
          <el-radio value="bottom">从上到下</el-radio>
          <el-radio value="right bottom">从左上到右下</el-radio>
        </el-radio-group>
      </div>
      <div class="rowStart mt-2">
        <div class="cLabel">起始颜色</div>
        <el-color-picker v-model="_widget.style.backgroundColorLinear![1]" show-alpha></el-color-picker>
      </div>
      <div class="rowStart mt-2">
        <div class="cLabel">结束颜色</div>
        <el-color-picker v-model="_widget.style.backgroundColorLinear![2]" show-alpha></el-color-picker>
      </div>
    </div>
    <div class="rowBetween mt-4" style="margin-left: 20px" v-if="_widget.style.backgroundColorType! === 'image'">
      <el-upload
        class="avatar-uploader"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <el-image
          v-if="_widget.style.backgroundColorValue!"
          :src="_widget.style.backgroundColorValue!"
          class="avatar"
        />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { TypeWidget } from "@/types/TypeDesign";
import type { PropType } from "vue";
import { Plus } from "@element-plus/icons-vue";

const props = defineProps({
  _widget: {
    type: Object as PropType<TypeWidget>,
    default: () => ({}),
  },
});

const handleAvatarSuccess = (res: any, file: any) => {
  console.log(res, file);
};
</script>

<style lang="scss" scoped>
.cLabel {
  font-size: 14px;
  width: 80px;
  text-align: left;
  align-self: center;
}

.avatar-uploader {
  width: 178px;
  height: 178px;
  display: block;
  border: solid 1px #f2f2f2;
}

.avatar-uploader .el-upload {
  border: 1px dashed gray;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
